<template>
    <div class="songlist">
        <ul>
            <li class="litop"><div class="liname">标题</div><div class="linamename">歌手</div><div class="liainame">专辑</div></li>
            <li @click="licilck(item.id,item,index)" :class="{liindex:$store.state.indexid === item.id}" class="li" v-for="(item,index) in $store.state.songnew" :key = 'item.id'>
            <div class="index">{{index+1}}</div>
            <div class="liname">{{item.name}}</div>
            <div class="linamename">{{item.ar[0].name}}</div>
            <div class="liainame">{{item.al.name}}</div>
            </li>
            
            <div v-if="$store.state.login !==200" class="tishi">登录后查看更多...</div>

        </ul>
        

    </div>
</template>

<script>
import http from '@/http/http.js'

export default {
    data() {
        return {
            songlistid:null,
            songlist:[],
            liindex:''
        }
    },
    methods: {
        //获取点击li的id
        
        licilck(id,value,index){

            // this.liindex = index
            this.$store.commit('indexxgai',id)
            this.$store.commit('indexdianji',index)


            // this.$store.commit('indexiodnull')
            console.log(id)
            //通过id请求音乐url地址
            http({
                url:'/song/url',
                params:{
                    id,
                    

                },
                
            }).then(res=>{
                // console.log(res.data.data[0])
                this.$store.commit('musicurlhandle',res.data.data[0].url)
                this.$store.commit('isplaybofang')

                
            })
            //点击的歌曲信息传入
            this.$store.commit('musicuserhandle',value)
        // console.log(this.$store.state.isplay)

        }
    },
    created() {
        // this.songlistid = this.$store.state.songnew
        
        // http({
        //     url:'/playlist/detail',
        //     params:{
        //         id:this.$store.state.songnew                    
        //     }
        // }).then(res =>{
        //     this.songlist = res.data.playlist.tracks
        //     console.log(res.data.playlist.tracks)
        //     this.$store.commit('songlists',res.data.playlist.tracks)

        // })
        // console.log(this.$store.state.songnew)
    },
    beforeDestroy() {
        // this.$store.commit('indexnull')
    },
}
</script>


<style lang="less" scoped>
.songlist{
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-left: 20px;
    // justify-content: center;
}

ul{
    
    margin-top: 10px;
    li:nth-child(even){
        background-color: #f9f9f9;
    }
    min-width: 600px;
}
.liindex{
    color: pink;
}
.li{
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-grow: 1;
    height: 40px;
    background-color: white;
    // border-top: 1px solid #666;
    font-size: 12px;
    line-height: 40px;

    .liname{
        padding-left: 60px;
        flex: 1.5;
    }
    .linamename{
        flex: 1;
    }
    .liainame{
        flex: 1;
    }
}
.li:hover{
    background-color: #f0f1f2;
    cursor: pointer;
}
.index{
        flex: 0.1;
        padding-left: 10px;
    }
.litop{
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    height: 40px;
    cursor: pointer;

    background-color: white;
    // border-top: 1px solid #666;
    font-size: 12px;
    line-height: 40px;
    
    .liname{
        padding-left: 110px;
        flex: 1.5;
    }
    .linamename{
        flex: 1;
    }
    .liainame{
        flex: 1;
    }
}
.tishi{
    text-align: center;
    font-size: 14px;
    margin-top: 10px;
    color: #666;
    cursor: pointer;
}
.list{
    height: 30px;
    cursor: pointer;
}
</style>